<template>
  <div class="dashboard">
    <div class="top">
      <el-row :gutter="10">
        <el-col :span="7">
          <el-card shadow="hover">
            <template #header>
              <span>分类商品数量（饼图）</span>
            </template>
            <div class="content">
              <pie-echart :pieData="categoryGoodsCount"></pie-echart>
            </div>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card shadow="hover">
            <template #header>
              <span>不同城市商品销量</span>
            </template>
            <div class="content">
              <map-echart :mapData="addressGoodsSale"></map-echart>
            </div>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card shadow="hover">
            <template #header>
              <span>分类商品数量（玫瑰图）</span>
            </template>
            <div class="content">
              <rose-echart :roseData="categoryGoodsCount"></rose-echart>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <span>分类商品的销量</span>
            </template>
            <div class="content">
              <line-echart :lineData="categoryGoodsSale"></line-echart>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <span> 分类商品的收藏 </span>
            </template>
            <div class="content">
              <bar-echart v-bind="categoryGoodsFavor"></bar-echart>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from '@/store'
import { pieEchart, roseEchart, lineEchart, barEchart, mapEchart } from '@/components/page-echarts'
import { computed } from 'vue'

const store = useStore()
store.dispatch('dashboard/getDashboardGoodsCountAction')
store.dispatch('dashboard/getDashboardGoodsSaleAction')
store.dispatch('dashboard/getDashboardGoodsFavorAction')
store.dispatch('dashboard/getAddressGoodsSaleAction')

const categoryGoodsCount = computed(() => {
  return store.state.dashboard.categoryGoodsCount.map((item) => {
    return {
      value: item.goodsCount,
      name: item.name
    }
  })
})

const categoryGoodsSale = computed(() => {
  return store.state.dashboard.categoryGoodsSale.map((item) => {
    return {
      name: item.name,
      value: item.goodsCount
    }
  })
})

const categoryGoodsFavor = computed(() => {
  const xAxis: string[] = []
  const values: any[] = []
  const categoryGoodsFavorList = store.state.dashboard.categoryGoodsFavor
  for (const item of categoryGoodsFavorList) {
    xAxis.push(item.name)
    values.push(item.goodsFavor)
  }
  return { xAxis, values }
})

const addressGoodsSale = computed(() => {
  return store.state.dashboard.addressGoodsSale.map((item) => {
    return {
      name: item.address,
      value: item.count
    }
  })
})
</script>

<style scoped lang="less">
.dashboard {
  width: 100%;
  height: 100%;
  .bottom {
    margin-top: 20px;
  }
}
</style>
